<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录注册界面</title>
    <link rel="stylesheet" href="./css/project.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <div id="loginForm">
            <h2>Login</h2>
          <label for="username">Username</label>
          <input type="text" id="username" name="username" placeholder="Enter your username">
    
          <label for="password">Password</label>
          <input type="password" id="password" name="password" placeholder="Enter your password">
          
          <label for="captcha">Captcha</label>
          <input type="captcha" id="captcha" name="captcha" placeholder="Enter your captcha">

          <button type="submit">Login</button>
        </div>
        <div id="registerForm" style="display: none;">
            <h2>Register</h2>
            <label for="newUsername">Username</label>
            <input type="text" id="newUsername" name="newUsername" placeholder="Enter a new username">
      
            <label for="newPassword">Password</label>
            <input type="password" id="newPassword" name="newPassword" placeholder="Enter a new password">

            <label for="email">E-mail</label>
            <input type="email" id="email" name="email" placeholder="Enter your email">
            <button type="esubmit" id="getCode">submit</button>

            <label for="captcha">Captcha</label>
          <input type="captcha" id="verCode" name="captcha" placeholder="Enter your captcha">
            <button type="submit" id="register">Register</button>
        </div>
      
        <p id="switchText">Don't have an account? <a href="#" onclick="switchForm()">Register now</a></p>
    </div>
    <script type= "text/javascript" src= "./js/login.js" ></script>
</body>
</html>
<script>
    //获取邮箱验证码
    $("#getCode").click(function () {
        var email = $("#email").val()
        console.log(email)
        $.ajax({
            url: "/user/sendEmail",
            type: "POST",
            data: {
                email: email
            },
            dataType: "json",
            success: function (res) {
                console.log(res)
                if (res.state == 200){
                    alert(res.data)
                }else {
                    alert(res.data)
                }
            }
        })
    })

//    用户注册
    $("#register").click(function () {
        var username = $("#newUsername").val()
        var password = $("#newPassword").val()
        var newEmail = $("#email").val()
        var verCode = $("#verCode").val()
        console.log(username)
        console.log(password)
        console.log(newEmail)
        console.log(verCode)
        $.ajax({
            url: "/user/register",
            type: "POST",
            data: {
                username: username,
                password: password,
                verCode: verCode,
                newEmail: newEmail
            },
            dataType: "json",
            success: function (res) {
                console.log(res)
                if (res.state == 200){
                    alert(res.data)
                }else {
                    alert(res.data)
                }
            }
        })
    })
</script>